<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>我的合约</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/agreement.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container">
        <div class="card">
            <div id="head-dom" class="card-head"></div>
            <script id="head" type="text/html">
                <img class="card-media" src="{{ pic }}" />
                <div class="card-head-title">&yen;{{ money }}/月</div>
            </script>
        </div>
    </div>
    <div id="person-dom" class="person-info"></div>
    <script id="person" type="text/html">
        <img class="circle-image" src="{{ housekeeper_logo }}">
        <div class="user-info">
            <span class="username">{{ housekeeper_username }}</span>
            <div class="star-bar">
                {{ housekeeper_star | star }}
            </div>
            <span class="font-blue">{{ housekeeper_star }}分</span>
        </div>
    </script>
    <div class="introduction"></div>
    <div class="form-body">
        <form action="">
            <div class="form-item">
                <span class="item-title">房间号</span>
                <a class="item-action" href="javascript:;">
                    <span id="room-number" class="action-value"></span>
                </a>
            </div>
            <div class="form-item">
                <span class="item-title">姓名</span>
                <a class="item-action" href="javascript:;">
                    <span id="username" class="action-value"></span>
                </a>
            </div>
            <div class="form-item">
                <span class="item-title">手机号</span>
                <a class="item-action" href="javascript:;">
                    <span id="usermobile" class="action-value"></span>
                </a>
            </div>
            <div class="form-item">
                <span class="item-title">入住时间</span>
                <a class="item-action" href="javascript:;">
                    <span id="start-time" class="action-value"></span>
                </a>
            </div>
            <div class="form-item">
                <span class="item-title">付款方式</span>
                <a class="item-action" href="javascript:;">
                    <span id="payment-type" class="action-value"></span>
                </a>
            </div>
            <div class="form-item">
                <p class="font-red">距离下次付款时间还有：<span id="rest"></span>天</p>
            </div>
        </form>
    </div>
    <div class="footer-padding"></div>
    <div class="tool-bar">
        <span class="separator"></span>
        <a id="phone" href="javascript:;">
            <i class="icon icon-phone"></i>
        </a>
        <a id="submit" href="javascript:;" class="btn yellow">我要付款</a>
    </div>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            bee.wxConfig(function() {
                bee.hideAllNonBaseMenuItem();
            }, function(res) {});

            init();
            initEvent();

            function init() {
                bee.request({
                    url: '/Member/Index/contract',
                    data: null,
                    success: function(result) {
                        bee.template('head', result.info, true);
                        bee.template('person', result.info, true);
                        $('.introduction').text(result.info.housekeeper_intro);
                        $('#room-number').text(result.info.room_number);
                        $('#rest').text(result.info.day);
                        $('#start-time').text(result.info.start_time);
                        $('#username').text(result.info.username);
                        $('#usermobile').text(result.info.usermobile);
                        if (result.info.payment_type === '3') {
                            $('#payment-type').text('年付');
                        } else if (result.info.payment_type === '2') {
                            $('#payment-type').text('季付');
                        } else if (result.info.payment_type === '1') {
                            $('#payment-type').text('月付');
                        }
                        $('#phone').attr('href', 'tel:' + result.info.housekeeper_mobile);
                        if (result.info.is_collertion) {
                            $('.favorite .icon').removeClass('icon-star-red-blank').addClass('icon-star-red');
                        }
                    }
                });
            }

            function initEvent() {
                $('body').on('click', '#submit', function() {
                    bee.open('payment.html');
                });
            }
        });
    </script>
</body>

</html>
